<template>
  <div class="business">
    <div class="search">
      <el-form
        ref="formRef"
        :model="taskSearchQuery"
        label-width="100px"
        style="--el-table-border-color: none"
      >
        <el-form-item label="工单编号:">
          <el-input v-model="taskSearchQuery.number" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="工单状态:">
          <el-select v-model="taskSearchQuery.status" placeholder="请选择">
            <el-option
              v-for="item in taskSatusList"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询 </el-button>
      </el-form>
    </div>
    <div class="list" v-loading="loading">
      <Table :searchTaskArray="searchTaskList.currentPageRecords"/>
      <BusinessDialog  @freshPage="freshPageFn" />
      <!-- 分页器 -->
      <Pagination
        :searchTaskList="searchTaskList"
        @currentSizeChange="currentSizeChangeFn"
        @currentPageChange="currentPageChangeFn"
      />
    </div>
  </div>
</template>

<script>
import { taskStatusAPI, searchTaskAPI } from '@/api'
import BusinessDialog from './components/BusinessDialog'
import Table from './components/Table'
export default {
  name: 'Business',
  data() {
    return {
      // 提升用户体验
      loading: false,
      // 请求的工单搜索参数
      taskSearchQuery: {
        number: '',
        status: '',
        pageIndex: 1,
        pageSize: 10,
        // userId: this.$store.getters.userInfo.userId,
        isRepair: false
      },
      // 获取的工单状态列表
      taskSatusList: [],
      // 获取的搜索工单对象
      searchTaskList: {
        currentPageRecords: [] // 声明空数组,作为响应式数据的先决条
      }
    }
  },
  components: {
    BusinessDialog,
    Table
  },
  created() {
    // 获取工单状态列表
    this.getTaskSatus()
    // 工单搜索
    this.searchTask()
  },
  methods: {
    // 工单状态
    async getTaskSatus() {
      try {
        const res = await taskStatusAPI()
        this.taskSatusList = res.data
        // console.log(res.data)
        return Promise.resolve(res)
      } catch (error) {
        return Promise.reject(error)
      }
    },
    // 工单搜索
    async searchTask() {
      this.loading = true
      try {
        const res = await searchTaskAPI(this.taskSearchQuery)
        // console.log(res.data.currentPageRecords)
        res.data.currentPageRecords.forEach((item) => {
          item.createTime = item.createTime.replace('T', ' ') // 创建日期
          item.updateTime = item.updateTime.replace('T', ' ') // 更新日期
        })
        this.searchTaskList = res.data
        // console.log(this.searchTaskArray)
        if (this.taskSearchQuery.pageIndex > 1 && this.searchTaskList.length === 0) {
          this.taskSearchQuery.pageIndex--
        }
        return Promise.resolve(res)
      } catch (error) {
        return Promise.reject(error)
      } finally {
        this.loading = false
      }
    },
    // 渲染列表的
    // 头部搜索表单
    onSubmit() {
      this.searchTask()
    },
    // 当前页面改变
    currentPageChangeFn(value) {
      this.taskSearchQuery.pageIndex = value
      this.searchTask()
    },
    // 页面数量的改变
    currentSizeChangeFn(value) {
      this.taskSearchQuery.pageSize = value
      this.searchTask()
    },
    // 子向父传值的刷新页面
    freshPageFn() {
      this.searchTask()
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  height: 64px;
  margin-bottom: 20px;
  border-radius: 5px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  .el-form {
  display: flex;
    .el-form-item {
      margin-top: 13px;
      .el-input,
      .el-select {
        width: 206px;
        /deep/.el-input__inner {
          height: 36px;
        }
      }
    }
    .el-button {
      align-items: center;
      min-width: 80px;
      height: 34px;
      margin-top: 16px;
      margin-left: 15px;
      padding: 0;
      background-color: #5f84ff;
      border: none;
    }
  }
}
.list {
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
}
</style>
